<template>
  <el-form
    ref="taskFormRef"
    :model="taskFrom"
    label-width="100px"
    :rules="rules"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="Task Key" prop="taskDefinitionKey">
          {{ task.taskDefinitionKey }}
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="FormKey" prop="formKey">
          {{ task.formKey }}
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="businessKey" prop="businessKey">
          {{ task.businessKey }}
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="businessStatus" prop="businessStatus">
          {{ task.businessStatus }}
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="Task Other" prop="other">
          {{ task }}
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="测试数据" prop="test">
          <el-input
            v-model="taskFrom.test"
            placeholder="测试数据"
            maxlength="36"
            show-word-limit
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <task-attachment
          :task-id="task.id"
          :proc-inst-id="task.processInstanceId"
        ></task-attachment>
      </el-col>
    </el-row>
  </el-form>
</template>
<script setup lang="ts">
import { ref, type PropType, reactive } from "vue";
import { type FormInstance, type FormRules, ElMessage } from "element-plus";
import type { FlowTaskModel } from "@/api/flow/task/types";
import { type TaskDealWith } from "@/api/flow/types";
import { StringAny } from "@/util/protobuf";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  task: {
    type: Object as PropType<FlowTaskModel>,
    default: () => {},
  },
});

export interface FlowTaskFrom {
  test?: string;
}

const taskFormRef = ref<FormInstance>();
const taskFrom = ref<FlowTaskFrom>({});

const rules = reactive<FormRules<FlowTaskFrom>>({
  test: [
    {
      required: true,
      message: "请输入测试数据!",
      trigger: "change",
    },
  ],
});

const model = defineModel<TaskDealWith>();

// 手动转发
defineExpose({
  changeModel: (): Promise<boolean> => changeModel(),
});

//更新Model
function changeModel(): Promise<boolean> {
  if (model.value) {
    model.value.selectActions = [
      { key: "true", value: "同意" },
      { key: "false", value: "不同意" },
    ];
    model.value.varName = "approved";
  }
  return new Promise<boolean>((resolve, reject) => {
    taskFormRef.value?.validate((valid) => {
      if (valid) {
        console.log("wee");
        if (model.value) {
          console.log(taskFrom.value.test);
          model.value.vars["test"] = new StringAny(taskFrom.value.test);
          model.value.comment = taskFrom.value.test;
        }
        resolve(true);
      } else {
        reject(false);
      }
    });
  });
}
</script>
